<template>
  <div class="main-container">
    <!-- 左侧视频区 -->
    <div class="left-column">
      <div class="video-player">
        <Player/>
      </div>
      <!-- 番剧信息 -->
      <div class="bangumi-info">
        <div class="cover-container">
          <el-image :src="imageUrl"/>
        </div>
        <div class="detail-container">
          <h1 class="bangumi-title">{{videoInfo.title}}</h1>
          <div class="meta-line">
            <span class="score">★{{videoInfo.rating}}</span>
            <span class="play-count">{{videoInfo.viewCount}}播放</span>
            <span class="follow-count" style="margin-left: 15px"> 800万追番</span>
          </div>
          <div>
            <span class="tag" v-for="tag in tags" :key="tag">{{ tag }}</span>
          </div>
          <p class="desc">{{videoInfo.introduction}}</p>
        </div>
      </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="right-column">
      <!-- 选集面板 -->
      <div class="episode-panel">
        <div class="panel-header">
          <h3 class="panel-title">选集</h3>
          <div class="panel-actions">
            <span class="panel-action">正片</span>
            <span class="panel-action">PV</span>
            <span class="panel-action">番外</span>
          </div>
        </div>
        <div class="episode-list">
          <div :class="['episode-item', { 'current': item.episodeNumber === current + 1 }]"
               v-for="item in currentEpisode" :key="item.fileId" @click="GoPlay(item.episodeNumber)">
            <div class="episode-num">{{ item.episodeNumber }}</div>
            <div class="episode-main">
              <div class="episode-title">{{videoInfo.title}} 第{{item.episodeNumber}}集</div>
              <div class="episode-duration">24:15</div>
            </div>
            <div class="episode-lock">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor">
                <path d="M12 15a2 2 0 100-4 2 2 0 000 4z"></path>
                <path d="M19 11a7 7 0 01-7 7m-7-7a7 7 0 017-7m-7 7h14"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- 推荐面板 -->
      <div class="recommend-panel">
        <div class="panel-header">
          <h3 class="panel-title">猜你喜欢</h3>
          <div class="panel-actions">
            <span class="panel-action">换一换</span>
          </div>
        </div>
        <div class="recommend-list">
          <div class="recommend-item">
            <div class="recommend-thumb">
              <img src="@/assets/image/lbt1.png" alt="鬼灭之刃">
              <span class="recommend-playcount">1.5亿</span>
            </div>
            <div class="recommend-info">
              <h4 class="recommend-title">鬼灭之刃 无限列车篇</h4>
              <div class="recommend-meta">更新至第7集 ★9.9</div>
            </div>
          </div>
          <div class="recommend-item">
            <div class="recommend-thumb">
              <img src="@/assets/image/lbt2.png" alt="间谍过家家">
              <span class="recommend-playcount">9876万</span>
            </div>
            <div class="recommend-info">
              <h4 class="recommend-title">间谍过家家</h4>
              <div class="recommend-meta">全12集 ★9.6</div>
            </div>
          </div>
          <div class="recommend-item">
            <div class="recommend-thumb">
              <img src="@/assets/image/lbt3.png" alt="链锯人">
              <span class="recommend-playcount">8563万</span>
            </div>
            <div class="recommend-info">
              <h4 class="recommend-title">链锯人</h4>
              <div class="recommend-meta">全12集 ★9.4</div>
            </div>
          </div>
          <div class="recommend-item">
            <div class="recommend-thumb">
              <img src="@/assets/image/lbt1.png" alt="鬼灭之刃">
              <span class="recommend-playcount">1.5亿</span>
            </div>
            <div class="recommend-info">
              <h4 class="recommend-title">鬼灭之刃 无限列车篇</h4>
              <div class="recommend-meta">更新至第7集 ★9.9</div>
            </div>
          </div>
          <div class="recommend-item">
            <div class="recommend-thumb">
              <img src="@/assets/image/lbt2.png" alt="间谍过家家">
              <span class="recommend-playcount">9876万</span>
            </div>
            <div class="recommend-info">
              <h4 class="recommend-title">间谍过家家</h4>
              <div class="recommend-meta">全12集 ★9.6</div>
            </div>
          </div>
          <div class="recommend-item">
            <div class="recommend-thumb">
              <img src="@/assets/image/lbt3.png" alt="链锯人">
              <span class="recommend-playcount">8563万</span>
            </div>
            <div class="recommend-info">
              <h4 class="recommend-title">链锯人</h4>
              <div class="recommend-meta">全12集 ★9.4</div>
            </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script setup>
import Player from "@/components/Player.vue";
import {useRoute,useRouter} from "vue-router";
import {ref,onMounted,watch} from "vue";
import {getVideoFileList, getVideoInfo} from "@/api/video.js";
import {imgUrl} from "@/utils/http.js";
import {mitter} from "@/eventbus/eventBus.js"

const videoInfo = ref({
  title: "",
  cover: "",
  description: "",
  staff: [],
  tags: [],
  episodes: [],
  playUrl: "",
  rating: "",
  region: ""
})
const tags = ref([])
const imageUrl = ref()
const route = useRoute();
const router = useRouter();

const videoInfoData = async () =>{
  const res = await getVideoInfo(route.params.id)
  videoInfo.value = res.data
  imageUrl.value = imgUrl + videoInfo.value.videoCover
  tags.value = JSON.parse(res.data.tags)
}

//播放选择
const current = route.params.playid - 1 || 0
const currentEpisode = ref([])
const currentChangeData = async () => {
    const res = await getVideoFileList(route.params.id)
    currentEpisode.value = res.data
    if(res.data.length > 2){
      mitter.emit("playUrl",res.data[current.value].filePath)
    }else{
      mitter.emit("playUrl",res.data[0].filePath)
    }
}

const GoPlay = (num) => {
  current.value = num - 1
}

//监听播放集数变化
watch(current,async (newVal) => {
  mitter.emit("playUrl",currentEpisode.value[newVal].filePath)
})

onMounted(() => {
  videoInfoData()
  currentChangeData()
})
</script>
<style scoped>
body {
  font-family: "PingFang SC","Microsoft YaHei",sans-serif;
  margin: 0;
}

/* 主容器 */
.main-container {
  max-width: 1400px;
  margin: 20px auto;
  padding: 0 15px;
  display: flex;
  gap: 20px;
}

/* 左侧视频区 */
.left-column {
  flex: 1;
  min-width: 0;
}

/* 播放器 */
.video-player {
  background: #000;
  border-radius: 6px;
  height: 480px;
  position: relative;
  overflow: hidden;
}
.video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 番剧信息区 */
.bangumi-info {
  display: flex;
  margin-top: 20px;
  background: white;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.cover-container {
  flex: 0 0 180px;
  margin-right: 20px;
}
.cover-img {
  width: 100%;
  border-radius: 4px;
}
.detail-container {
  flex: 1;
}
.bangumi-title {
  font-size: 22px;
  margin: 0 0 10px;
  font-weight: 500;
}
.meta-line {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}
.score {
  color: #FFB800;
  font-weight: bold;
  margin-right: 15px;
}
.play-count::before {
  content: "▶";
  margin-right: 4px;
  font-size: 12px;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  background: #F4F4F4;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 12px;
}
.desc {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* 右侧边栏 */
.right-column {
  width: 380px;
  flex-shrink: 0;
}

/* 选集面板 */
.episode-panel {
  background: white;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.panel-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}
.panel-actions {
  display: flex;
}
.panel-action {
  font-size: 14px;
  margin-left: 15px;
  cursor: pointer;
}
.episode-list {
  max-height: 500px;
  overflow-y: auto;
}
.episode-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
}
.episode-item:hover {
  background: #f5f5f5;
}
.episode-item.current {
  background: rgba(0,161,214,.1);
}
.episode-num {
  width: 40px;
  font-weight: 500;
}
.episode-item.current .episode-num {
}
.episode-main {
  flex: 1;
}
.episode-title {
  font-size: 14px;
  margin-bottom: 4px;
}
.episode-duration {
  font-size: 12px;
}
.episode-lock {
  width: 20px;
  text-align: center;
}

/* 推荐列表 */
.recommend-panel {
  background: white;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.recommend-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.recommend-item {
  display: flex;
  cursor: pointer;
}
.recommend-thumb {
  width: 120px;
  height: 70px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.recommend-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recommend-playcount {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 12px;
  color: white;
  background: rgba(0,0,0,.5);
  padding: 2px 6px;
  border-radius: 4px;
}
.recommend-info {
  flex: 1;
  padding-left: 10px;
  overflow: hidden;
}
.recommend-title {
  font-size: 14px;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recommend-meta {
  font-size: 12px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .main-container {
    flex-direction: column;
  }
  .right-column {
    width: 100%;
  }
  .episode-list {
    max-height: none;
  }
}
</style>